<template>
    <div>
        <div class="searchBox">
            <Form :label-width="120" class="search-form">
                <Row>
                    <Col :span="5">
                        <FormItem label="维修单号">
                            <Input type="text" clearable v-model="searchParams.workorderNo" :placeholder="`${$t('common.inputInfo')}`"></Input>
                        </FormItem>
                    </Col>
                    <Col :span="5">
                        <FormItem label="工单状态">
                            <Select v-model="searchParams.status" clearable>
                                <Option v-for="m in statusList" :value="m.val" :key="m.val">{{ m.n }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :span="5">
                        <FormItem label="维修方式">
                            <Select v-model="searchParams.mainType" clearable>
                                <Option v-for="m in modeList" :value="m.val" :key="m.val">{{ m.n }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
<!--                    <Col :span="5">-->
<!--                        <FormItem label="故障性质">-->
<!--                            <Select v-model="searchParams.faultId" clearable filterable>-->
<!--                                <Option v-for="m in typeList" :value="m.value" :key="m.value">{{ m.label }}</Option>-->
<!--                            </Select>-->
<!--                        </FormItem>-->
<!--                    </Col>-->
                    <Col :span="5">
                       <FormItem :label="`${$t('fault.FunctionalLocation')}:`" >
                            <Cascader :data="orgList" v-model="searchParams.orgCode" change-on-select></Cascader>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem label="维修申请时间：">
                            <DatePicker type="datetimerange" placement="bottom" :value="dateTimeRange" :placeholder="`${$t('common.selectInfo')}`" clearable @on-change="handleChangeDate"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col :span="5">
                        <FormItem :label="`${$t('maintenance.EquipmentName')}:`">
                            <Input type="text" clearable v-model="searchParams.deviceName" :placeholder="`${$t('common.inputInfo')}`"></Input>
                        </FormItem>
                    </Col>
                    <Col :span="5">
                        <FormItem :label="`${$t('common.machineno')}:`">
                            <Input type="text" clearable v-model="searchParams.deviceNo" :placeholder="`${$t('common.inputInfo')}`"></Input>
                        </FormItem>
                    </Col>
                    <Col :span="5">
                        <FormItem :label="`${$t('maintenance.EquipmentNo')}:`">
                            <Input type="text" clearable v-model="searchParams.deviceMId" :placeholder="`${$t('common.inputInfo')}`"></Input>
                        </FormItem>
                    </Col>
                    <Col :span="5">
                        <FormItem label="一级故障分类">
                            <Select v-model="searchParams.firstclass" clearable filterable>
                                <Option v-for="item in classifyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
<!--                            <Select-->
<!--                                v-model="searchParams.firstclass"-->
<!--                                filterable-->
<!--                                clearable-->
<!--                                :remote-method="handleRemote"-->
<!--                                :loading="loading"-->
<!--                                >-->
<!--                                <Option v-for="item in classifyList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!--                            </Select>-->
<!--                            <Input type="text" clearable v-model="searchParams.firstclass" placeholder="请输入一级故障分类"></Input>-->
                        </FormItem>
                    </Col>
                    <Col :span="5">
                        <FormItem label="二级故障分类">
                            <Select v-model="searchParams.secondclass" clearable filterable>
                                <Option v-for="item in classifySecondList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
<!--                            <Select-->
<!--                                    v-model="searchParams.secondclass"-->
<!--                                    filterable-->
<!--                                    clearable-->
<!--                                    :remote-method="handleSecondRemote"-->
<!--                                    :loading="loading"-->
<!--                            >-->
<!--                                <Option v-for="item in classifySecondList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!--                            </Select>-->
<!--                            <Input type="text" clearable v-model="searchParams.secondclass" placeholder="请输入二级故障分类"></Input>-->
                        </FormItem>
                    </Col>
                    <Col :span="5">
                        <FormItem label="报修人">
                            <Select v-model="searchParams.createBy" clearable filterable>
                                <Option v-for="item in memberList" :value="item.id" :key="item.id">{{ item.realname }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :span="4" align="center" v-if="checkBtnPermission.workorderReportList">
                        <Button type="primary" @click="onSearch">{{$t('common.Query')}}</Button>
                    </Col>
                </Row>
            </Form>
        </div>
            <div class="btns clear">
                <span  class="creatBtnright" @click="onExport" v-if="checkBtnPermission.workorderReportExport">
                    <span><Icon type="ios-cloud-download-outline" /></span>
                    <span class="rightbtn">导出工单列表</span>
                </span>
            </div>
            <div class="tableContent">
                <Table :columns="columns" :data="list">
                    <template slot-scope="{ row }" slot="statusDiv">
                        <div
                                class="statusDiv"
                                :style="`color:${row.status===1?'#999999': row.status===2?'#edbe20' : '#36ce53'};border: '1px solid ${row.status===1?'#999999': row.status===2?'#edbe20' : '#36ce53'}'`"
                        >{{ row.statusText }}</div>
                    </template>
                    <template slot-scope="{ row }" slot="action">
                        <span class="table-operate-btn" @click="onDetails(row)">
                          <Icon type="ios-list-box-outline" />详情
                        </span>
                                        <span class="table-operate-btn" @click="onDelete(row)">
                          <Icon type="ios-trash-outline" />删除
                        </span>
                    </template>
                </Table>
            </div>
            <div class="pageWrap">
                <Page
                        :total="total"
                        :page-size="pageSize"
                        :page-size-opts="$variable.pageSizes"
                        :current="pageNum"
                        @on-change="changePageNum"
                        @on-page-size-change="changePageSize"

                        show-sizer
                        show-total
                />
            </div>
            <Modal :mask-closable="false"
                    v-model="delelteVisible"
                    title="">
                <Row class="enableContent">
                    <Col span="24" class="enableContentInner">
                        <img width="95px" src="~images/event/del.png" alt="">
                    </Col>
                    <Col span="24" class="enableTips">
                        <span>{{$t('common.sureDelete')}}</span>
                    </Col>
                </Row>
                <div slot="footer">
                    <Button type="default"  @click="delelteVisible = false">{{$t('common.Cancle')}}</Button>
                    <Button type="primary" :loading="delLoading" @click="handleDeleteOk">{{$t('maintenance.Confirmed')}}</Button>
                </div>
            </Modal>
            <order-detail-modal ref="orderDetailModal"/>
    </div>
</template>

<script>
    import recursion from '../../../../util/recursion'
    import fileDownload from 'js-file-download'
    import OrderDetailModal from "./orderDetailModal";
    export default {
        name: "brokenReportList",
        components: {OrderDetailModal},
        data() {
            return {
                maintaintimesTotal: 0,
                stoptimesTotal: 0,
                delId: '',
                total: 0,
                pageNum: 1,
                pageSize: 10,
                delLoading: false,
                delelteVisible: false,
                loading: false,
                searchParams: {},
                checkBtnPermission: {},
                statusList: [
                    { n: "全部", val: "" },
                    { n: '待确认', val: 1 },
                    { n: '已驳回', val: 2 },
                    { n: '未分配', val: 3 },
                    { n: '故障确认', val: 4 },
                    { n: '委外签批', val: 5 },
                    { n: '委外确认', val: 10 },
                    { n: '待维修', val: 6 },
                    { n: '维修中', val: 7 },
                    { n: '已完工', val: 8 },
                    { n: '已验收', val: 9 },
                    { n: '已复核', val: 11 },
                ],
                modeList: [
                    { n: "全部", val: "" },
                    { n: '自行维修', val: 1 },
                    { n: '保修期内维修', val: 2 },
                    { n: '委外维修', val: 3 },
                ],
                typeList: [{ label: '全部', value: undefined }],
                columns: [
                    {
                        title: '任务状态',
                        key: 'statusText',
                        align: 'center',
                        minWidth: 120,
                        // slot: "statusDiv",
                        // render: (h, params) => {
                        //   return h('div', params.row.status === 0 ? '非台账' : params.row.status === 1 ? '已验收' : '已入账')
                        // }
                    },
                    {
                        title: '工单号',
                        key: 'workorderNo',
                        align: 'center',
                        minWidth: 200,
                        render: (h, params) => {
                            return h('a',
                                {
                                    style: {
                                        color: 'blue',
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleledgerDetail(params.row.id,params.row.workorderNo, params.row.status)
                                        }
                                    }
                                }, params.row.workorderNo)
                        }
                    },
                    {
                       title: `${ this.$t('maintenance.EquipmentName') }`,
                        key: 'deviceName',
                        align: 'center',
                        minWidth: 200,
                    },
                    {
                        title: `${ this.$t('common.machineno') }`,
                        key: 'deviceNo',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: `${ this.$t('maintenance.EquipmentNo') }`,
                        key: 'deviceMId',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '资产号',
                        key: 'assetsNo',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: `${ this.$t('preliminary.EquipmentType') }`,
                        key: 'categoryName',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '生产线描述',
                        key: 'productionLine',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                       title: `${ this.$t('fault.FunctionalLocation') }`,
                        key: 'orgName',
                        align: 'center',
                        minWidth: 250
                    },
                    {
                        title: '报修人',
                        key: 'createBy',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '维修员',
                        key: 'mainMan',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '报修时间',
                        key: 'createTime',
                        align: 'center',
                        minWidth: 200,
                        // render: (h, params) => {
                        //   return h('div', params.row.createTime.substr(0,10))
                        // }
                    },
                    {
                        title: '一级故障分类',
                        key: 'firstclass',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '二级故障分类',
                        key: 'secondclass',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '维修方式',
                        key: 'mainTypeText',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '维修申请时间',
                        key: 'createTime',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '维修开始时间',
                        key: 'startTime',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '维修完工时间',
                        key: 'completeTime',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '维修工时',
                        key: 'maintaintimes',
                        align: 'center',
                        minWidth: 200
                    },
                    // {
                    //   title: `${ this.$t('common.operation') }`,
                    //   slot: "action",
                    //   width: 180,
                    //   align: "center",
                    //   fixed: 'right',
                    // }
                ],
                list: [],
                orgList: [],
                dateTimeRange: [],
                classifyList: [],
                classifySecondList: [],
                memberList: [],
            }
        },
        created() {
            let url = window.location.href.split('?')[1]; //获取url中"?"符后的字串
            let strs = url ? url.split("&") : [];
            let theRequest = new Object();
            for(let i = 0; i < strs.length; i ++) {
                theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
            }
            this.searchParams.deviceMId = theRequest.deviceMId
            this.getOrgList()
            this.getList()
            this.getMainList()
            this.getMemberList()
            this.getFirstList()
            this.getSecondList()
        },
        mounted() {
            let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
            for(let item of itemList){
                if(item.code=="workorderReportList"){
                    this.checkBtnPermission.workorderReportList = true
                }
                if(item.code=="workorderReportExport"){
                    this.checkBtnPermission.workorderReportExport = true
                }
                if(item.code=="workorderQueryById"){
                    this.checkBtnPermission.workorderQueryById = true
                }
            }
        },
        methods: {
            //获取故障数据
            getMainList() {
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderFaultNature/selectList',
                    params: {}
                }).then(res => {
                    if (res.code === 200) {
                        this.typeList = [...this.typeList, ...res.data]
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            //获取报修人数据
            getMemberList(){
                this.axios({
                    method: 'post',
                    url: '/dms/workOrder/getUsers',
                    data: {}
                }).then(res => {
                    if (res.code === 200) {
                        this.memberList = res.data
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            getOrgList() {
                this.axios({
                    method: 'get',
                    url: '/basic/organization/findListByToken',
                    params: {}
                }).then(res => {
                    if(res.code === 200){
                        const obj ={
                            label: 'name',
                            value: 'code',
                            children: 'children'
                        }
                        this.orgList = recursion.convertTree(res.data, obj)
                        console.log(this.orgList)
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            handleledgerDetail(id, workorderNo, status) {
                if (this.checkBtnPermission.workorderQueryById) {
                    let obj = { id, workorderNo, status}
                    this.$refs.orderDetailModal.show(obj, 'brokenReport')
                }
            },
            getFirstList() {
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderDealType/selectClassList',
                    params: {
                        type : 1
                    }
                }).then(res => {
                    
                    if (res.code === 200) {
                        this.classifyList = res.data
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            getSecondList() {
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderDealType/selectClassList',
                    params: {
                        type : 2
                    }
                }).then(res => {
                    
                    if (res.code === 200) {
                        this.classifySecondList = res.data
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            handleRemote(query) {
                if (query !== '') {
                    this.loading = true;
                    this.axios({
                        method: 'get',
                        url: '/workorder/workorderDealType/selectClassList',
                        params: {
                            classname: query,
                            type : 1
                        }
                    }).then(res => {
                        
                        if (res.code === 200) {
                            this.classifyList = res.data
                        }else {
                            this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                        }
                    }).finally(() => {
                        this.loading = false
                    })
                } else {
                    this.classifyList = [];
                }
            },
            handleSecondRemote(query) {
                if (query !== '') {
                    this.loading = true;
                    this.axios({
                        method: 'get',
                        url: '/workorder/workorderDealType/selectClassList',
                        params: {
                            classname: query,
                            type : 2
                        }
                    }).then(res => {
                        
                        if (res.code === 200) {
                            this.classifySecondList = res.data
                        }else {
                            this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                        }
                    }).finally(() => {
                        this.loading = false
                    })
                } else {
                    this.classifySecondList = [];
                }
            },
            handleChangeDate(val) {
                console.log(val)
                this.searchParams.beginDate = val[0]
                this.searchParams.endDate = val[1]
            },
            changePageSize(val) {
                this.pageSize = val
                this.getList()
            },
            changePageNum(val) {
                this.pageNum = val
                this.getList()
            },
            onSearch() {
                this.pageNum = 1;
                this.getList()
            },
            getList() {
                let params = {
                    pageNo:this.pageNum,
                    pageSize:this.pageSize,
                };
                for (let key in this.searchParams) {
                    if (key === 'orgCode' && this.searchParams['orgCode']) {
                        const arr = this.searchParams[key]
                        const { length, last=length-1 } = arr
                        this.$set(params, key, arr[last])
                    }else {
                        if (this.searchParams[key]) {
                            this.$set(params, key, this.searchParams[key])
                        }
                    }

                }
                this.list = []
                this.total = 0
                this.stoptimesTotal = 0
                this.maintaintimesTotal = 0
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderReport/list',
                    params: params
                }).then(res => {
                    if(res.code === 200){
                      for (let item of res.data.list){
                         this.list.push(item)
                      }
                        // this.list = res.data.list
                        this.total = res.data.total
                        this.stoptimesTotal = res.data.list[0].stoptimesTotal
                        this.maintaintimesTotal = res.data.list[0].maintaintimesTotal
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                  this.$forceUpdate()
                })
            },
            onDetails(record) {

            },
            onDelete(record) {
                this.delelteVisible = true
                this.delId = record.id
            },
            onExport() {
                let params = {};
                for (let key in this.searchParams) {
                    if (this.searchParams[key]) {
                        this.$set(params, key, this.searchParams[key])
                    }
                }
                const filName = '工单报表'
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderReport/export',
                    responseType: 'blob',
                    params: params
                }).then(res => {
                    fileDownload(res, filName + '.xlsx')
                })

            },
            handleDeleteOk() {
                this.axios({
                    method: 'delete',
                    url: '/workorder/workorderReport/delete',
                    params: {
                        id: this.delId
                    }
                }).then(res => {
                    
                    if(res.code === 200){
                        this.$Message.success('删除成功！')
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                }).finally(() => {
                    this.delelteVisible = false
                    this.getList()
                })
            }
        },
    }
</script>

<style scoped>

</style>
